<template>
  <div id="wrap">
    <h1>effectScope案例2</h1>
    <!-- 第一次 -->
    <button type="button" @click="runtimer1Scope">runtimer1Scope</button>
    <button type="button" @click="stoptimer1Scope">stoptimer1Scope</button>
    <hr />

    <!-- 第二次 -->
    <button type="button" @click="runtimer2Scope">runtimer2Scope</button>
    <button type="button" @click="stoptimer2Scope">stoptimer2Scope</button>
    <hr />

    <!-- 干扰 -->
    <button type="button" @click="ganR">干扰2000+</button>
    <hr />
  </div>
</template>

<script lang="ts" setup>
// 创建一个计时器的组合函数;使用 effectScope 创建作用域;effectScope() 的返回值类型是 EffectScope，这是 Vue 的内置类型。可以显式声明返回值类型
import { ref, type Ref, reactive,EffectScope, effectScope, onScopeDispose } from 'vue';

function useTimer(): EffectScope {
  const scope = effectScope();
  return scope;
}
function srun(scope: EffectScope, step = 1000): { time: Ref<number> } {
  const time = ref(0);
  let interval: ReturnType<typeof setInterval>;
  scope.run(() => {
    //开启定时器
    interval = setInterval(() => {
      console.log(time.value);
      time.value++;
    }, step);
    //在作用域销毁时清理定时器
    onScopeDispose(() => {
      clearInterval(interval);
      console.log('计时器停止，资源被清理。');
    });
  });
  return { time };
}

const rac = reactive<Ref<number>[]>([]);
//使用作用域1
const time1 = useTimer();
// console.log(time1);
const runtimer1Scope = () => {
  const { time } = srun(time1);
  // console.log(time);
  rac.push(time);
};
const stoptimer1Scope = () => {
  time1.stop();
};
//使用作用域2
const timer2 = useTimer();
const runtimer2Scope = () => {
  const { time } = srun(timer2);
  rac.push(time);
  console.log(rac);
};
const stoptimer2Scope = () => {
  timer2.stop();
};
//干扰  需求：在计时器执行过程中进行干扰
const ganR = () => {
  if (rac.length > 0) {
    rac[0].value = 2000;
  }
};
</script>
